<script setup lang="ts">
import type { CascaderDiff } from '../..'
import { defaultConfirmBoxTips } from '../../constants/defaultValue'
import ConfirmBoxCard from './ConfirmBoxCard.vue'
import OperationAction from './OperationAction.vue'
import RiskCard from './RiskCard.vue'

export interface ConfirmBoxProps {
  diff?: CascaderDiff[]
  risks?: string[]
  tips?: string[]
}

const props = withDefaults(defineProps<ConfirmBoxProps>(), {
  diff: () => [],
  tips: () => defaultConfirmBoxTips,
  risks: () => [],
})
const isShowOperationActionCard = computed(() => {
  const tipDiff = props.diff.filter(item => item.diffType !== 'SORT').length
  return tipDiff > 0
})
</script>

<template>
  <div class="cascader-confirm-box">
    <confirm-box-card body-class="tips-wrapper">
      <div
        v-for="(tip, i) in tips"
        :key="i"
        class="text-[#1D2129]"
      >
        {{ tip }}
      </div>
    </confirm-box-card>
    <risk-card
      v-if="risks.length"
      :risks="risks"
    />
    <operation-action
      v-if="isShowOperationActionCard"
      :diff="diff"
    />
  </div>
</template>

<style lang="less" scoped>
.cascader-confirm-box {
  width: 100%;
  :deep(.changed-description) {
    display: inline-flex;
    gap: 8px;
    //border: 1px solid red !important;
    display: flex;
    //padding: 12px 16px;
    align-items: center;
    align-content: center;
    //gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
  }
}
</style>
